<button>点击</button>
<script>
    var btn = document.querySelector('button')

    btn.onclick = debounce(function () { console.log('zhukehan');}, 200)
    
    function debounce(fn, tick) {
   
        let timer = 0
      
        return function () {
            fn = fn.bind(this)

            if (timer) {
                clearTimeout(timer)
            }
       
            timer = setTimeout(() => {
                fn()
            }, tick);
        }
    }


</script>


<!-- 难点：
1. 应了解此案列的逻辑问题： 1： 防抖的基本思路就是每次进行事件时创建一个延时定时器，并清除掉上个延时定时器，那样
                          在延时定时器到时间前点击的话就会不断的清除掉之前设置的定时器，最后只执行最后一次。
                          2： 需要一个逻辑判断，判断当前存在延时定时器就清除他，不存在（第一次执行）就设置一个
                          定时器，那就需要设置一个初始值timer 否则在第一次执行时就会出现未声明的报错。
                          3:  timer声明无法放在每次点击事件中，否则的话会不断的初始化timer导致无法清空定时器，且timer
                          必须放在函数中，防止全局暴露和更好的封装。
                          4： 需要利用一个逻辑，让一个函数的返回值作为事件处理函数，那这个函数的之前的部分就会
                          在调用时就执行。

2. fn()会调用这个函数，将他的代码逻辑全部执行，如果有返回值的话会返回到fn() 中，没有返回值的话 fn() 为undefined

3. 事件中，必须存在事件处理函数，否则无法正常执行事件

4. 执行逻辑需要放在定时器中，所以会导致this指向出现问题，应该在定时器外，事件函数中 的代码部分使用bind获取正确的this指向

5. 高阶函数 -->

                             